<template>
  <div class="course-detail">
    <van-nav-bar
      title="课程详情"
      left-text="返回"
      left-arrow
      @click-left="onClickBack"
    />

    <div class="content">
      <h2>{{ course.title }}</h2>
      <div class="meta">
        <span class="time">{{ course.time }}</span>
      </div>
      <div class="body">
        <p>{{ course.content }}</p>
        <p>课程ID: {{ course.id }}</p>
        <p>课程类型: {{ course.type }}</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { showToast } from 'vant'

const route = useRoute()
const router = useRouter()

// 模拟数据 - 后续需要替换为API获取的真实数据
const course = ref({
  id: route.params.id,
  title: '课程详情',
  content: '这是课程的详细内容',
  time: '2025-06-18 10:15',
  type: '计算机科学'
})

const onClickBack = () => {
  router.back()
}
</script>

<style scoped>
.course-detail {
  min-height: 100vh;
  background-color: #f7f8fa;
}

.content {
  padding: 16px;
}

h2 {
  font-size: 18px;
  margin-bottom: 8px;
}

.meta {
  color: #969799;
  font-size: 12px;
  margin-bottom: 16px;
}

.body {
  line-height: 1.6;
}

.body p {
  margin-bottom: 8px;
}
</style>
